<template>
  <div class="home">
    <!--    搜索-->
    <el-card style="margin-bottom: 40px" class="box-card" shadow="hover">
      <div style="display: flex">
        <div style="margin-right: 30px">
          <label class="el-form-item__label">收件人: </label>
          <el-input
            style="width: 160px"
            placeholder="请输入收件人姓名"
            v-model="search.recvName"
          ></el-input>
        </div>
        <div style="margin-right: 30px">
          <label class="el-form-item__label">订单编号: </label>
          <el-input
            style="width: 160px"
            placeholder="请输入订单编号"
            v-model="search.id"
          ></el-input>
        </div>
        <div style="margin-right: 30px">
          <label class="el-form-item__label">订单金额: </label>
          <el-input
            style="width: 160px"
            placeholder="请输入订单金额"
            v-model="search.totalPrice"
          ></el-input>
        </div>

        <el-button style="margin-left: 5px" type="primary" @click="Search">
          <i class="el-icon-search"></i>搜索
        </el-button>
        <el-button style="margin-left: 8px" @click="reset">
          <i class="el-icon-refresh-right"></i>重置
        </el-button>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div style="display: flex; margin-bottom: 10px">
        <span style="font-weight: bold">订单详情</span>
        <div class="fontStyle" style="margin-left: 900px">
          <span>销售额{{ allPrice }}元</span>
        </div>
        <!-- <span style="font-weight: bold; margin-left: auto; margin-right: 8px"
            >课程选择:
          </span> -->
        <!-- <el-select
            style="margin-top: -5px; margin-right: 45px"
            v-model="params.coursename"
            @change="load"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in course"
              :key="item.coursename"
              :label="item.coursename"
              :value="item.coursename"
            >
            </el-option>
          </el-select> -->
        <!-- 
        <el-button
          style="margin-left: auto; margin-right: 40px"
          type="primary"
          @click="add"
        >
          <i class="el-icon-circle-plus-outline"></i>
          添加订单</el-button
        > -->
      </div>
      <vxe-table
        border
        :column-config="{ resizable: true }"
        :tree-config="{ transform: true }"
        :data="tableData"
        align="center"
        ref="vxeTable"
        max-height="350"
      >
        <vxe-column field="id" title="订单编号"></vxe-column>
        <vxe-column type="expand" width="80">
          <template #content="{ row }">
            <div class="expand-wrapper">
              <vxe-grid
                :columns="childCols"
                auto-resize
                :data="row.orderItemVOList"
                align="center"
              ></vxe-grid>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="recvName" title="收件人名称"></vxe-column>
        <vxe-column field="recvPhone" title="收件人手机号"></vxe-column>
        <vxe-column field="recvAddress" title="收件地址"></vxe-column>
        <vxe-column field="orderTime" title="订单创建时间"></vxe-column>
        <vxe-column field="totalPrice" title="订单金额"></vxe-column>
        <vxe-column field="status" title="订单状态">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.status === 1 ? 'primary' : 'success'"
                disable-transitions>
              {{scope.row.status === 1 ? '已支付' : '未支付'}}
            </el-tag>
            &nbsp;
            <el-tag
                :type="scope.row.isDelete === 0 ? 'warning' : 'danger'"
                disable-transitions>
              {{scope.row.isDelete === 1 ? '已删除' : '未删除'}}
            </el-tag>
          </template>
        </vxe-column>

        <vxe-column width="80" title="操作">
          <template #default="{ row }">
            <el-popconfirm title="是否删除该订单" @confirm="delOrder(row)">
              <el-button slot="reference" type="text" > 删除 </el-button>
            </el-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- <el-table :data="tableData" stripe border height="350">
        <el-table-column prop="ordersId" label="订单编号"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"></el-table-column>
        <el-table-column
          prop="customerPhone"
          label="客户手机号"
        ></el-table-column>
        <el-table-column
          prop="customerAddress"
          label="客户地址"
        ></el-table-column>
        <el-table-column prop="email" label="邮编"></el-table-column>
        <el-table-column prop="ordersTime" label="订购时间"></el-table-column>
        <el-table-column prop="ordersPrices" label="订购金额"></el-table-column>
        <el-table-column label="操作" width="250">
          <template v-slot="scope">
            <el-button type="text" @click="edit(scope.row)">
              <i class="el-icon-edit"></i>
              编辑订单
            </el-button>
            <el-popconfirm
              style="margin-left: 4px"
              title="您确定删除这行数据吗？"
              @confirm="del(scope.row.ordersName)"
            >
              <el-button slot="reference" type="text">
                <i class="el-icon-delete"></i>删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table> -->
      <!--  分页-->
      <div style="margin-top: 20px; display: flex">
        <el-pagination
          background
          :current-page="params.pageIndex"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog title="添加订单" :visible.sync="IsAdd" width="30%">
        <el-form
          :model="Addform"
          label-width="100px"
          ref="Addform"
          :rules="rulesAdd"
        >
          <el-form-item label="客户编号" prop="customerId">
            <el-select
              v-model="Addform.customerId"
              @change="customerIdChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in this.customerIdList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input
              v-model="Addform.customerName"
              disabled
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户手机号" prop="customerPhone">
            <el-input
              v-model="Addform.customerPhone"
              disabled
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户地址" prop="customerAddress">
            <el-input
              v-model="Addform.customerAddress"
              disabled
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="email">
            <el-input
              v-model="Addform.email"
              placeholder="请输入邮编"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品编号" prop="shopId">
            <el-select
              v-model="Addform.shopId"
              @change="shopIdChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in this.shopIdList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单价" prop="marketPrice">
            <el-input
              v-model="Addform.marketPrice"
              placeholder="请输入单价"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="订购数量" prop="nums">
            <el-input-number
              v-model="Addform.nums"
              :min="1"
              label="请输入订购数量"
              @change="computePrice()"
            />
          </el-form-item>
          <el-form-item label="订购金额" prop="ordersPrices">
            <el-input
              v-model="Addform.ordersPrices"
              placeholder="请输入订购金额"
              disabled
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="IsAdd = false">取 消</el-button>
          <el-button type="primary" @click="addMsg">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="编辑订单" :visible.sync="IsEdit" width="30%">
        <el-form
          :model="Editform"
          label-width="100px"
          ref="Editform"
          :rules="rulesEdit"
        >
          <el-form-item label="客户名称" prop="customerName">
            <el-input
              v-model="Editform.customerName"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户手机号" prop="customerPhone">
            <el-input
              v-model="Editform.customerPhone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户地址" prop="customerAddress">
            <el-input
              v-model="Editform.customerAddress"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="email">
            <el-input
              v-model="Editform.email"
              placeholder="请输入邮编"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="IsEdit = false">取 消</el-button>
          <el-button type="primary" @click="editMsg">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
      
      <script>
import request from "@/api/request";
//   import Cookies from "js-cookie";

export default {
  name: "StudentList",
  data() {
    return {
      search:{
      },
      allPrice: 0,
      childCols: [
        { type: "seq", title: "#", width: "100" },
        { field: "id", title: "订单明细编号", width: "120" },
        { field: "title", title: "商品名称", width: "300" },
        { field: "num", title: "订购数量", width: "100" },
        { field: "price", title: "单价", width: "100" },
        { field: "total", title: "总价", width: "100" },
      ],
      tableData: [],
      shopIdList: [],
      customerIdList: [],
      // 添加
      Addform: {},
      rulesAdd: {
        score: [
          { required: true, message: "请输入成绩", trigger: "blur" },
          {
            pattern: /^(([1-9]\d?)|100|0)$/,
            message: "请输入0~100",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "选填" },
          { min: 6, max: 6, message: "长度 6 个字符", trigger: "blur" },
        ],
      },
      IsAdd: false,
      // 编辑
      Editform: {},
      rulesEdit: {
        email: [
          { required: true, message: "选填" },
          { min: 6, max: 6, message: "长度 6 个字符", trigger: "blur" },
        ],
      },
      IsEdit: false,
      // 展示

      total: 0,
      dialogFormVisible: false,
      form: {},
      params: {
        pageSize: 10,
        pageIndex: 1,
        // ordersPrices: "",
        //   ordersTime:''
      },
      rules: {},
    };
  },
  created() {
    // this.getBland();
    this.getTotal();
    this.load();
  },
  methods: {
    Search(){
      var sss=Object.assign(this.search,this.params);
      request
          .put("/api/order/search", sss)
          .then((res) => {
            console.log(res);
            if (res.code === 20000) {
              // let cnt = 1;
              // res.data.list.forEach((element) => {
              //   element.id = cnt++;
              // });
              this.tableData = res.data.data;
              console.log(this.tableData);
              delete this.tableData.children;
              this.$refs.vxeTable.loadData(this.tableData);
              console.log(this.tableData);
              // this.total = res.data.count;
              // this.calPrice();
            }
          });
    },
    getTotal(){
      this.allPrice = 0;
      request.get("/api/order/getTotal").then((res) => {
        if (res.code === 20000) {
          this.allPrice = res.data;
        }
      });
    },
    delOrder(row) {
      request.delete("/api/order/delete/" + row.id).then((res) => {
        if (res.code === 20000) {
          this.$notify.success("删除成功");
          this.load();
        }
      }).catch(error=>{
        console.log(error);
      });
    },
    calPrice() {
      this.allPrice = 0;
      this.tableData.forEach((el) => {
        this.allPrice += parseInt(el.totalPrice);
      });
    },
    getBland() {
      request.get("/customerInfo/distinct_customerId").then((res) => {
        this.customerIdList = res.data;
      });
      request.get("/shop/distinct_shopId").then((res) => {
        this.shopIdList = res.data;
      });
    },
    dateFormat(temp) {
      console.log(temp);
      this.params.ordersTime = temp.toString();
    },
    addMsg() {
      this.$refs["Addform"].validate((valid) => {
        if (valid) {
          request.post("/orders/save", this.Addform).then((res) => {
            if (res.code === "-1") {
              this.$notify.error(res.msg);
            } else if (res.code === "200") {
              this.$notify.success("新增成功");
            }
            console.log(res);

            this.$refs["Addform"].resetFields();
            this.IsAdd = false;
            this.load();
          });
        }
      });
    },
    editMsg() {
      this.$refs["Editform"].validate((valid) => {
        if (valid) {
          request.put("/orders/update", this.Editform).then((res) => {
            if (res.code === "200") {
              this.$notify.success("更新成功");
              this.$refs["Editform"].resetFields();
              this.IsEdit = false;
              this.load();
            } else {
              this.$notify.error(res.msg);
            }
          });
        }
      });
    },
    edit(row) {
      this.IsEdit = true;
      console.log(row);
      this.Editform.main = row.ordersId;
      request.get("/orders/" + row.ordersId).then((res) => {
        this.Editform = res.data;
      });
    },
    load() {
      request
        .put("/api/order/listAll", this.params)
        .then((res) => {
          console.log(res);
          if (res.code === 20000) {
            // let cnt = 1;
            // res.data.list.forEach((element) => {
            //   element.id = cnt++;
            // });
            this.tableData = res.data.data;
            console.log(this.tableData);
            delete this.tableData.children;
            this.$refs.vxeTable.loadData(this.tableData);
            console.log(this.tableData);
            this.total = res.data.count;
            // this.calPrice();
          }
        });
    },
    reset() {
      this.search={};
      this.load();
    },
    // 换页
    handleCurrentChange(pageIndex) {
      this.params.pageIndex = pageIndex;
      this.load();
    },
    add() {
      this.IsAdd = true;
    },
    del(ordersId) {
      request.delete("/orders/delete/" + ordersId).then((res) => {
        if (res.code === "200") {
          this.$notify.success("删除成功");
          this.load();
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    customerIdChange() {
      // console.log(this.Addform);
      request.get("/customerInfo/" + this.Addform.customerId).then((res) => {
        this.$set(this.Addform, "customerAddress", res.data.customerAddress);
        this.Addform.customerId = res.data.customerId;
        this.Addform.customerName = res.data.customerName;
        this.Addform.customerPhone = res.data.customerPhone;
      });
    },
    shopIdChange() {
      // console.log(this.Addform);
      request.get("/shop/" + this.Addform.shopId).then((res) => {
        this.$set(this.Addform, "marketPrice", res.data.marketPrice);
        this.Addform.marketPrice = res.data.marketPrice;
      });
    },
    computePrice() {
      this.Addform.ordersPrices =
        this.Addform.nums * parseInt(this.Addform.marketPrice);
    },
  },
};
</script>
      
      <style scoped>
.el-form-item__label {
  align-items: flex-start;
  box-sizing: border-box;
  color: var(--el-text-color-regular);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--el-form-label-font-size);
  height: 32px;
  justify-content: flex-end;
  line-height: 32px;
  padding: 0 12px 0 0;
  font-weight: bold;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.fontStyle {
  color: #333436;
  font-family: "楷体";
  font-weight: 600;
  font-size: 20px;
  margin: 4px 4px 0 0;
}
</style>